<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 两种登录方式 -->
        <select v-model="loginType">
            <option value="user">用户名登录</option>
            <option value="phone">手机号登录</option>
        </select>
        <div class="login">

            <!-- 如果不加key属性  => vue默认就会采用就地更新策略(能复用就复用,不能复用就生成新的), 此时label标签和input标签会被复用 -->
            <!-- 添加了key值之后  key值不同,vue在解析时 就不会复用, 而是直接生成新的 -->
            <p v-if="loginType=='user'" key="a">
                <label>用户名:</label>
                <input type="text" name="user">
            </p>
            <p v-if="loginType=='phone'" key="b">
                <label>手机号:</label>
                <input type="text" name="phone">
            </p>
            <p>
                <label>密&emsp;码:</label>
                <input type="text" name="pwd">
            </p>
            <p>
               <input type="submit" value="登录">
               <input type="reset" value="取消">
            </p>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            loginType:"user",

        }
    })

</script>
</html>